<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../css/BigScreen.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="top">
            <p class="title">业务运行状态监控大屏</p>
            <ul class="tab">
                <li class="tab-item active" data-type="0">今日</li>
                <li class="tab-item" data-type="1">近7日</li>
                <li class="tab-item" data-type="2">近30日</li>
            </ul>
        </div>
        <div class="main">
            <div class="main-left">
                <section class="login-analysis">
                    <div class="section-title">用户登录分析</div>
                    <div id="login-analysis-chart"></div>
                </section>
                <section class="risk-statistic">
                    <div class="section-title">业务风险统计</div>
                    <ul class="risk-statistic-num">
                        <li class="li-item">
                            <div class="li-item-top">
                                <img src="../img/icon-cross-red.png" alt="">
                                <span class="name">特别严重</span>
                            </div>
                            <p class="frequency"><span class="num" id="especial-serious-num">-</span>&nbsp;次</p>
                        </li>
                        <li class="li-item">
                            <div class="li-item-top">
                                <img src="../img/icon-cross-yellow.png" alt="">
                                <span class="name">严重</span>
                            </div>
                            <p class="frequency"><span class="num" id="serious-num">-</span>&nbsp;次</p>
                        </li>
                        <li class="li-item">
                            <div class="li-item-top">
                                <img src="../img/icon-cross-blue.png" alt="">
                                <span class="name">较重</span>
                            </div>
                            <p class="frequency"><span class="num" id="heavier-num">-</span>&nbsp;次</p>
                        </li>
                        <li class="li-item">
                            <div class="li-item-top">
                                <img src="../img/icon-cross-cyan.png" alt="">
                                <span class="name">一般</span>
                            </div>
                            <p class="frequency"><span class="num" id="commonly-num">-</span>&nbsp;次</p>
                        </li>
                    </ul>
                    <div id="risk-statistic-chart"></div>
                </section>
            </div>
            <div class="main-middle">
                <section class="map-container">
                    <div class="section-title">业务办理统计</div>
                    <div id="map-chart"></div>
                    <div class="province-area" style="display: none;">
                        <div>
                            <p class="title">办理总数</p>
                            <p>
                                <span class="num1" id="province-total">-</span>笔
                                <img class="totalChangeImg" src="../img/icon-arrow-up.png" alt="">
                                <span class="num2 color" id="province-total-change">-</span>
                                <span class="color">笔</span>
                            </p>
                        </div>
                        <div>
                            <p class="title">办理成功</p>
                            <p>
                                <span class="num1" id="province-success">-</span>笔
                                <img class="successChangeImg" src="../img/icon-arrow-up.png" alt="">
                                <span class="num2 color" id="province-success-change">-</span>
                                <span class="color">笔</span>
                            </p>
                        </div>
                        <div class="province-area-bottom">
                            <div class="bottom-left">
                                <p class="title">办理失败</p>
                                <p>
                                    <span class="num1" id="province-fail">-</span>笔
                                    <img class="failChangeImg" src="../img/icon-arrow-up.png" alt="">
                                    <span class="num2 color" id="province-fail-change">-</span>
                                    <span class="color">笔</span>
                                </p>
                            </div>
                            <div>
                                <p class="title">失败率</p>
                                <p>
                                    <span class="num1" id="province-failrate">-</span>%
                                    <img class="failrateChangeImg" src="../img/icon-arrow-up.png" alt="">
                                    <span class="num2 color" id="province-failrate-change">-</span>
                                    <span class="color">%</span>
                                </p>
                            </div>
                        </div>
                    </div>
                 </section>
                <section class="business-trend">
                    <div class="section-title">业务办理趋势</div>
                    <div id="business-trend-chart"></div>
                </section>
            </div>
            <div class="main-right">
                <section class="fail-business">
                    <div class="section-title">业务办理失败分析</div>
                    <div id="fail-unit-chart"></div>
                    <div id="fail-business-chart"></div>
                </section>
            </div>
        </div>
    </div>
    <div class="data-load">
        <div>
            <!-- 正在加载 -->
        </div>
    </div>
</body>
<script src="../lib/jquery-2.2.3.min.js"></script>
<script src="../lib/echarts-4.8.0.min.js"></script>
<script src="../lib/mapJson_wzx.js"></script>
<script src="../lib/mapJson.js"></script>
<script src="../js/common.js"></script>
<script src="../js/BigScreen.js"></script>

</html>